<template lang="pug">
view.empty-box.flex.center
  view(:style="`--width:${size}rpx;--height:${data.height || size}rpx;`")
    image.icon.m-auto(:src="icon" @load="_load")
    view.m-t-25.center {{text || '数据为空~'}}
    slot
</template>
<script setup>
import {reactive} from 'vue'
const props = defineProps({
  text: String,
  icon: {type: String, default: ''},
  size: {type: [Number, String], default: 100},// 设置图标的宽度单位rpx
})
const data = reactive({
  height: 0
})
const _load = (img)=>{
  const {width, height} = img.detail
  data.height = height / width * props.size
}
</script>
<style lang="scss" scoped>
@use '~@/common/scss/mixin.scss' as *;
.empty-box{
  height: var(--empty-box-height, 50vh);
  @include bg(var(--empty-box-bgcolor, transparent));
  .icon{
    width: var(--width);
    height: var(--height);
    display: block;
  }
  color: var(--empty-box-color, #999);
}
</style>